<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor  style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <el-button type="primary" @click="startAnalysis" size="small">开始漫游</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {loadModelLayer, loadTdtLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import keyPathRoam from "@/widgets/modelExample_cesium/common/pathRoam/keyPathRoam";
import {onMounted, ref} from "vue";
import AceEditor from "@/components/aceEditor.vue";
const cViewer = ref();

const htmlStr=ref(`<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <el-button type="primary" @click="startAnalysis" size="small">开始漫游</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {loadModelLayer, loadTdtLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import keyPathRoam from "@/widgets/modelExample_cesium/common/pathRoam/keyPathRoam";
import {onMounted, ref} from "vue";

const cViewer = ref();

onMounted(() => {
  cViewer.value = initMap("load4490_box")
  loadTdtLayer(cViewer.value, 'c', false);
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/building2/tileset.json',
      "md_tiles",
      {
        bLocTo: true,
        height: 6,
        offset: {
          "tx": 117.08,
          "ty": 40.23,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": -90
        }
      }
  );
})
const startAnalysis = () => {
  let keyPath = new keyPathRoam(cViewer.value,10,0.05);
  document.addEventListener('keydown', (event: any) => keyPath.handleKeyDown(event));
  document.addEventListener('keyup', (event: any) => keyPath.handleKeyUp(event));
}
<\/script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 100px);
  width: 200px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 50%;
}
</style>


`);
const tsStr=ref(`/**
 * 操作键盘实现人物的运动漫游
 * 操作wasd和↑ ↓ ← →
 */
class KeyPathRoam {
    keyActions: any;
    cameraState: any;
    $viewer: any;
    moveSpeed: number
    turnSpeed: number;

    constructor(viewer: any,moveSpeed:number=1,turnSpeed:number=0.01) {
        this.$viewer = viewer;
        this.moveSpeed = moveSpeed;//上下移动速度
        this.turnSpeed = turnSpeed;//左右移动角度，【-180,180】
        this.keyActions = {
            ArrowUp: {moveForward: true},
            ArrowDown: {moveBackward: true},
            ArrowLeft: {turnLeft: true},
            ArrowRight: {turnRight: true},
            w: {moveForward: true},
            s: {moveBackward: true},
            a: {turnLeft: true},
            d: {turnRight: true},
            // 可以添加更多键及其对应操作
        };
        this.cameraState = {
            moveForward: false,
            moveBackward: false,
            turnLeft: false,
            turnRight: false,
        };
    }

    // key按下的事件
    handleKeyDown(event: any) {
        if (this.keyActions[event.key]) {
            Object.assign(this.cameraState, this.keyActions[event.key]);
        }
        this.updateCamera(this.$viewer);
    }

    // key抬起的事件
    handleKeyUp(event: any) {
        if (this.keyActions[event.key]) {
            Object.keys(this.keyActions[event.key]).forEach((action) => {
                this.cameraState[action] = false;
            });
            this.updateCamera(this.$viewer);
        }
    }

    //执行更新
    updateCamera(viewer: any) {
        //根据高度计算移动速度
        let cameraHeight = viewer.scene.globe.ellipsoid.cartesianToCartographic(viewer.camera.position).height;
        let moveRate = cameraHeight / 100.0;
        if (this.cameraState.moveForward) {
            viewer.scene.camera.moveForward(moveRate);
        }
        if (this.cameraState.moveBackward) {
            viewer.scene.camera.moveBackward(moveRate);
        }
        if (this.cameraState.turnLeft) {
            viewer.scene.camera.moveLeft(moveRate);
        }
        if (this.cameraState.turnRight) {
            viewer.scene.camera.moveRight(moveRate);
        }
    }
}

export default KeyPathRoam;
`);

onMounted(() => {
  cViewer.value = initMap("load4490_box")
  loadTdtLayer(cViewer.value, 'c', false);
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/building2/tileset.json',
      "md_tiles",
      {
        bLocTo: true,
        height: 6,
        offset: {
          "tx": 117.08,
          "ty": 40.23,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": -90
        }
      }
  );
})
const startAnalysis = () => {
  let keyPath = new keyPathRoam(cViewer.value,10,0.05);
  document.addEventListener('keydown', (event: any) => keyPath.handleKeyDown(event));
  document.addEventListener('keyup', (event: any) => keyPath.handleKeyUp(event));
}
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 100px);
  width: 200px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 50%;
}
</style>
